<template>
    <div class="page-demo-table-base">
        <div class="main-page-content">
            <ContentHeader title="这里是类图辅助度量页面" explain="在本页面上传您的类图，将为您反馈度量结果">

            </ContentHeader>

            <div class="page-content">
                <span style="font-size: large;">上传您的类图</span>
                <a-divider />
                <a-upload name="file" :multiple="false" :showUploadList="false" :customRequest="uploadOomFile">
                    <a-button> <a-icon type="upload" /> 选择要上传的类图（oom文件）</a-button>
                </a-upload>
                <div v-if="!(classList == undefined || classList == null || classList.length <= 0)"
                    style="margin-top: 15px;">您的类图分析已经生成，请下滑查看。</div>
                <div v-if="!(lkResult == undefined || lkResult == null || lkResult.length <= 0)" style="margin-top: 15px;">
                    您的类图度量结果已经生成，请下滑查看。</div>

            </div>
            <div v-if="!(classList == undefined || classList == null || classList.length <= 0)" class="page-content"
                style="margin-top: 0px;position: relative;">
                <span style="font-size: large;">已上传类图的内容</span>
                <a-divider />

                <a-card v-for="item in classList" class="form-card" :loading="false" :bordered="false" :title="item.name"
                    style="margin:20px;">
                    <a-form-model layout="vertical">
                        <a-row class="form-row" :gutter="16" style="margin-bottom: 5px;margin-top: 0px;">
                            <a-col :lg="8" :md="12" :sm="24" style="margin-left: 38px;">
                                <span>父类名称： </span>
                                <a-button v-if="item.parentClass != null" @click="clickCheck()"
                                    style="width:205px;margin-bottom: 2px;">{{ item.parentClass.name }}</a-button>
                                <a-button v-else style="width:205px; margin-bottom: 2px;">无</a-button>
                            </a-col>
                            <a-col :xl="{ span: 13, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
                                <span>参数： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <a-button
                                    v-if="!(item.attributeName == undefined || item.attributeName == null || item.attributeName.length <= 0)"
                                    style="width:300px;margin-bottom: 2px;">
                                    <span v-for="prname, index in item.attributeName">{{ prname }}<span
                                        v-if="index != item.attributeName.length - 1">,&nbsp;</span></span>
                                </a-button>
                                <a-button
                                    v-else
                                    style="width:300px;margin-bottom: 2px;">
                                    <span>无</span>
                                </a-button>
                            </a-col>
                        </a-row>
                        <a-row class="form-row" :gutter="16" style="margin-top: 5px;margin-bottom: 0px;">
                            <a-col :lg="8" :md="12" :sm="24" style="margin-left: 38px;">
                                <span>子类数量： </span>
                                <a-button style="width:205px;margin-bottom: 2px;">{{ item.subNum }}</a-button>
                               
                            </a-col>
                            <a-col :xl="{ span: 13, offset: 2 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="24">
                                <span>方法： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <a-button
                                    v-if="!(item.methodName == undefined || item.methodName == null || item.methodName.length <= 0)"
                                    style="width:300px; margin-top:2px;">
                                    <span v-for="mtdname, index in item.methodName">{{ mtdname }}<span
                                            v-if="index != item.methodName.length - 1">,&nbsp;</span></span>
                                </a-button>
                                <a-button
                                    v-else
                                    style="width:300px;margin-bottom: 2px;">
                                    <span>无</span>
                                </a-button>
                            </a-col>
                            

                        </a-row>
                    </a-form-model>
                </a-card>

            </div>
            <div v-if="!(lkResult == undefined || lkResult == null || lkResult.length <= 0)" class="page-content"
                style="margin-top: 0px;position: relative;">
                <span style="font-size: large;">类图辅助度量结果</span>
                <a-divider />
                <a-card class="form-card" :loading="false" :bordered="false">
                    <a-table :columns="columns" :dataSource="lkResult" :pagination="false" :loading="false">
                    </a-table>
                </a-card>
                <div style="height:46px"></div>
            </div>
            <ContentFooter v-if="!(lkResult == undefined || lkResult == null || lkResult.length <= 0)"  explain="面向对象度量方法针对面向对象的特点对面向对象软件的设计与实现进行度量。">
                <div class="helpnote">
                    <div>
                        本页面通过解析用户上传的类图，得到CK度量方法的两个度量点：继承树的深度DIT、子类数量NOC，<br />
                        LK度量方法的四个度量点：类规模度量CS，方法重写数NOO，增加方法数量NOA，特征化指数SI。<br />
                    </div>
                    <div>
                        （1） 类规模度量CS：<br />
                        类的属性总数量和类的方法总数量越多，说明类的规模越大，类承载的职责较多。<br />
                        （2） 方法重写数量NOO：<br />
                        如果方法重写数量过多，说明子类继承父类时，父类不能够完全表达子类的行为特征。<br />
                        （3） 增加方法数量NOA：<br />
                        子类继承父类时增加方法的数量。NOA值过大，说明父类方法不能完全表达子类的行为特征；继承深度越来越深NOA，应该越小越好。<br />
                        （4） 特征化指数SI：<br />
                        特征化指数用来度量每一个子类在类图设计中的特征化等级，属于间接测量的综合属性。特征化指数体现了面向对象的抽象性与继承性。<br />
                        （5） 继承树深度DIT（Depth of Inheritance Tree）：<br />
                        计算某个类在系统类设计的继承树中最大深度，也就是最深层次。<br/>
                        （6） 子类数量NOC（Number of Children）：<br />
                        计算一个父类拥有多少个直接继承的子类。NOC也是对类的继承性的度量。

                    </div>
                </div>
            </ContentFooter>
            <ContentFooter v-else activeKey="1" explain="面向对象度量方法针对面向对象的特点对面向对象软件的设计与实现进行度量。">
                <div class="helpnote">
                    <div>
                        本页面通过解析用户上传的类图，得到CK度量方法的两个度量点：继承树的深度DIT、子类数量NOC，<br />
                        LK度量方法的四个度量点：类规模度量CS，方法重写数NOO，增加方法数量NOA，特征化指数SI。<br />
                    </div>
                    <div>
                        （1） 类规模度量CS：<br />
                        类的属性总数量和类的方法总数量越多，说明类的规模越大，类承载的职责较多。<br />
                        （2） 方法重写数量NOO：<br />
                        如果方法重写数量过多，说明子类继承父类时，父类不能够完全表达子类的行为特征。<br />
                        （3） 增加方法数量NOA：<br />
                        子类继承父类时增加方法的数量。NOA值过大，说明父类方法不能完全表达子类的行为特征；继承深度越来越深NOA，应该越小越好。<br />
                        （4） 特征化指数SI：<br />
                        特征化指数用来度量每一个子类在类图设计中的特征化等级，属于间接测量的综合属性。特征化指数体现了面向对象的抽象性与继承性。<br />
                        （5） 继承树深度DIT（Depth of Inheritance Tree）：<br />
                        计算某个类在系统类设计的继承树中最大深度，也就是最深层次。<br/>
                        （6） 子类数量NOC（Number of Children）：<br />
                        计算一个父类拥有多少个直接继承的子类。NOC也是对类的继承性的度量。

                    </div>
                </div>
            </ContentFooter>
        </div>
    </div>
</template>
<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer";
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        return {
            classList: [],
            lkResult: [],
            "columns": [
                {
                    title: '类名',
                    dataIndex: 'className',
                    key: 'className',
                    width: '20%',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title: 'CS',
                    dataIndex: 'cs',
                    key: 'cs',
                    width: '12%',
                    scopedSlots: { customRender: 'workId' }
                },
                {
                    title: 'DIT',
                    dataIndex: 'dit',
                    key: 'dit',
                    width: '12%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: 'NOA',
                    dataIndex: 'noa',
                    key: 'noa',
                    width: '12%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: 'NOC',
                    dataIndex: 'noc',
                    key: 'noc',
                    width: '12%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: 'NOO',
                    dataIndex: 'noo',
                    key: 'noo',
                    width: '12%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: 'SI',
                    dataIndex: 'si',
                    key: 'si',
                    width: '12%',
                    scopedSlots: { customRender: 'department' }
                },
            ],
        };
    },
    methods: {
        beforeUp(file) {
            let formdata = new FormData();
            formdata.append("file", file)
            console.log(file)
            this.$http.post('http://localhost:8085/oommetric/get_class_diagram_mes', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }
            ).then(res => {
                console.log("获取类图信息，返回结果为：", res.data.data)
                this.classList = res.data.data
            }).catch(error => {
                console.log(error)
            })
        },
        uploadOomFile(data) {
            // const formData = new FormData()
            // formData.append("file", data.file);
            // this.getClassDiagramMessage(data.file);
            this.getLkResult(data.file);
            // console.log(data.file)
        },
        getClassDiagramMessage(data) {
            let formdata = new FormData()
            formdata.append("file", data)
            console.log("获取类图信息，发送HTTP请求……", data)
            this.$http.post('http://localhost:8085/oommetric/get_class_diagram_mes', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }
            ).then(res => {
                console.log("获取类图信息，返回结果为：", res.data.data)
                this.classList = res.data.data
            }).catch(error => {
                console.log(error)
            })
        },
        getLkResult(data) {
            console.log("获取lk度量结果，发送HTTP请求……", data)
            let formdata = new FormData()
            formdata.append("file", data)
            this.$http.post('http://localhost:8085/oommetric/lkmetric', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }).then(res => {
                console.log("获取lk度量结果，返回结果为：", res.data)
                this.lkResult = res.data.data.lkMetricVOS
                this.classList = res.data.data.classDiagramArrayList
            }).catch(error => {
                console.log(error)
            })
        },
        clickCheck() {
            console.log("啊！我被点击了！")
        }
    },
};
</script>
<style lang="less" scoped>
@import "./analysis.less";
</style>
  